import { Button, Image, ImagePreviewGroup } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { riverApi } from '@/apis'
import { WithdrawDetail } from '@/apis/riverTypes'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT } from '@/constants'
import { useDialog } from '@/hooks'
import { optionsToMap } from '@/utils'

import { billTypeOptions, paymentOptions, statusOptions } from '../constants'
import FinanceRejectDialog from './components/FinanceRejectDialog'

export default defineComponent({
  name: 'RvWithdrawHistory',
  setup() {
    const route = useRoute()
    const tableRef = ref({} as ProTableRef)

    const rejectDlgRef = ref(null)

    const { showInfo } = useDialog()
    const id = Number(route.query.id)
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        columnConfig: {
          minWidth: 150,
          resizable: true
        },
        columns: [
          {
            title: '服务商名称',
            field: 'purchaserName',
            width: 200
          },
          {
            title: '提现金额',
            field: 'amount',
            width: 100,
            formatter: ({ cellValue }) => {
              return '￥' + cellValue
            }
          },

          {
            title: '是否打款',
            field: 'isPay',
            formatter: ({ cellValue }) => {
              return optionsToMap(paymentOptions)[cellValue]
            },
            width: 80
          },
          {
            title: '发票凭证',
            width: 270,
            slots: {
              default: 'billImages'
            }
          },
          {
            title: '状态',
            field: 'status',
            formatter: ({ cellValue }) => {
              return optionsToMap(statusOptions)[cellValue]
            }
          },
          {
            title: '发票类型',
            field: 'invoiceType',
            formatter: ({ cellValue }) => {
              return optionsToMap(billTypeOptions)[cellValue]
            }
          },
          {
            title: '提交申请时间',
            field: 'submitTime',
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss']
          },
          {
            title: '审核时间',
            field: 'checkTime',
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss']
          },
          {
            title: '最新驳回时间',
            field: 'checkRejectTime',
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss']
          },

          {
            title: '操作',
            width: 200,
            fixed: 'right',
            slots: {
              default: 'operation'
            }
          }
        ],

        proxyConfig: {
          ajax: {
            query: async ({ page, form }) => {
              const data = await riverApi.getWithdrawHistoryList(id)

              return data
            }
          }
        }
      }
    } as ProTableProps)

    const router = useRouter()

    //查看详情/审核
    function handleDetail(item: WithdrawDetail) {
      router.push({
        name: 'RvFinanceBillDetail',
        query: {
          id: item.id,
          isHistory: 'isHistory'
        }
      })
    }

    //驳回理由
    function handleRejectReason(item: WithdrawDetail) {
      // //@ts-ignore
      // rejectDlgRef.value.open(item.id, true)
      showInfo(item.rejectReason)
    }

    //备注
    function handleRemark(item: WithdrawDetail) {
      showInfo(item.comments)
    }

    return {
      tableRef,
      tableConfig,

      rejectDlgRef,
      handleDetail,
      handleRemark,
      handleRejectReason
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            billImages: ({ row }) => (
              <ImagePreviewGroup>
                <div>
                  {row.invoices?.split(',').map(item => {
                    return <Image style={{ height: '60px' }} src={item}></Image>
                  })}
                </div>
              </ImagePreviewGroup>
            ),
            operation: ({ row }) => (
              <div>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleDetail(row)}
                >
                  查看详情
                </Button>

                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleRemark(row)}
                >
                  查看备注
                </Button>
                <Button
                  v-show={row.status == 1}
                  type="link"
                  size="small"
                  onClick={() => this.handleRejectReason(row)}
                >
                  驳回理由
                </Button>
              </div>
            )
          }}
          {...this.tableConfig}
        />
        <FinanceRejectDialog ref="rejectDlgRef"></FinanceRejectDialog>
      </div>
    )
  }
})
